<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12.栅格固定命名放置元素</title>
<style>
  article {
    width: 300px;
    height: 300px;
    border: solid 5px silver;
    display: grid;
    grid-template-rows: [r1-start] 100px [r1-end r2-start]100px [r2-end r3-start] 100px[r3-end];
    grid-template-columns: [c1-start] 100px [c1-end c2-start]100px [c2-end c3-start] 100px[c3-end];
   
  }

  div {
    background-color: blueviolet;
    background-clip: content-box;
    box-sizing: border-box;
  }

  div:first-child{
    grid-row-start: r1-start;
    grid-column-start: c1-end;
    grid-row-end: r1-end;
    grid-column-end: c2-end;
  }
</style>
</head>

<body>
  <article>
    <div>1</div>

  </article>
</body>

</html>